<template>
	<view class="userMovieItem flex align-start solid-bottom" style="padding-bottom: 40upx;">
		<view class="userMovieItem-img">
			<image :src="userMovieItem.movieImg" mode="widthFix"></image>
		</view>
		<view class="userMovieItem-content margin-top-sm flex flex-direction margin-left-sm">
			<view class="title margin-top-xs">
				<text class="text-bold">{{userMovieItem.movieName}}</text>
			</view>
			<view class="rate margin-top-xs">
				<tui-rate :current="userMovieItem.movieScore" :quantity="5" :size="13" active="#FFB712" :hollow="true"></tui-rate>
				<text class="NumberSoc text-gray">{{userMovieItem.movieScore}}</text>
			</view>
			<view class="info margin-top-xs text-gray">
				<block v-for="(tag) in userMovieItem.movietag" :key="tag">
					{{tag}}/
				</block>
			</view>
			<view class="tag text-gray">
				<view>
					{{userMovieItem.relationTime}}
				</view>
				<view>
					{{userMovieItem.relationType}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		created() {
			// console.log(this.userMovieItem)
		},
		props: {
			userMovieItem: {
				type: Object,
				default: {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.userMovieItem {
		.userMovieItem-img {
			overflow: hidden;
			width: 200upx;
			height: 250upx;
		}

		.tag {
			width: 500upx;
			background-color: #eee;
			padding: 20upx 20upx;
			border-radius: 8upx;

			view {
				font-size: 28upx;
				line-height: 40upx;
			}
		}
	}
</style>
